/********************************************
结果查看页面
** */
<template>
  <div class="mod-config">
    <basic-container>

      <div  class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >

           <!--   <el-form-item label="员工编号" v-if="radio==1">
                <el-input v-model="searchForm.username" placeholder="请输入标题关键字" :clearable="true"></el-input>
              </el-form-item>-->
              <el-form-item label="姓名" v-if="radio==1">
                <el-input v-model="searchForm.realname" placeholder="请输入姓名" :clearable="true"></el-input>
              </el-form-item>
         <!--     <el-form-item label="部门名称" v-if="radio==1">
                <el-input v-model="searchForm.deptName" placeholder="请输入部门名称" :clearable="true"></el-input>
              </el-form-item>-->
              <el-form-item label="部门">
                <el-input v-model="searchForm.deptName" placeholder="请输入部门名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期" >
                <el-select
                  v-model="searchForm.khzq"
                  placeholder="请选择周期"
                  class="xiaLa"
                  @change="searchByZq"
                  style="width: 100%"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in kezqsList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button><!--v-if="permissions.zxgz_zxgzgzcj_view"-->
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!--同意 驳回 操作按钮-->
         <!-- <div style="display: flex;justify-content: flex-end;padding-bottom: 10px;border-bottom: 1px solid #b0bde2;">
            <el-button
              @click="print"
              type="primary"
            >导出</el-button>
          </div>-->

        <!--table标签 切换-->
        <div style="margin-top: 20px">
          事件考核
          <span>
                <el-radio v-model="radio" label="1">人员</el-radio>
                <el-radio v-model="radio" label="2">机构</el-radio>
              </span>
        </div>

        <!--数据列表-->
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          ref="table"
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        >
<!--          <el-table-column type="selection" align="center"></el-table-column>-->
          <el-table-column type="index"  :index="indexMethod" header-align="center" align="center" label="序号" width="55"></el-table-column>
          <el-table-column prop="username" align="center" label="员工编号" show-overflow-tooltip sortable  v-if="radio==1"></el-table-column>
          <el-table-column prop="realname" align="center" label="姓名" show-overflow-tooltip sortable  v-if="radio==1"></el-table-column>
          <el-table-column prop="deptName" align="center" label="部门" show-overflow-tooltip sortable  v-if="radio==1"></el-table-column>
          <el-table-column prop="realname" align="center" label="部门" show-overflow-tooltip sortable  v-if="radio==2"></el-table-column>
          <el-table-column prop="khzq" align="center" label="考核周期"   show-overflow-tooltip></el-table-column>
          <el-table-column prop="zzjj" align="center" label="总奖金" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="zzfz" align="center" label="总分值" show-overflow-tooltip sortable ></el-table-column>
       <!--   <el-table-column align="center" fixed="right"   label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click=""
              >查看</el-button>&lt;!&ndash;dataView(scope.row)&ndash;&gt;
            </template>
          </el-table-column>-->
        </el-table>

        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </basic-container>

    <!--选择部门人员组件-->
    <detailView v-if="detailVisible" ref="detailNode" @closeDetailDialog="closeDetailDialog"></detailView>
  </div>
</template>

<script>
    // 接口 api
    import {exportExcel,eventSummaryList,dataDetail} from "@/api/dailyExamine/eventExamine/resultsSummary.js";
    import {getKhzqSelect} from "@/api/dailyExamine/eventExamine/event.js";
    import detailView from "@/views/dailyExamine/eventExamine/resultsSummary/detailView";
    import { mapGetters} from "vuex";
    import store from "@/store";
    export default {
        components: {
            detailView,
        },
        data() {
            return {
                headers: {
                    Authorization: "Bearer " + store.getters.access_token
                },
                detailVisible: false,
                appealVisible:false,
                joinConfirmVisible: false,
                searchForm: {},
                radio:'1',
                multipleSelection: [], //表格中被选中的数据
                dataList: [],
                hisTableData: [],
                actPicUrlList: [],
                actPicUrl: "",
                showPicDialog: false,
                getCryItem:"",
                dataListLoading: false,
                searchadvanced: true,
                searchheight: "0",
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                isAgreeOrRefuse: true,
                canConfirm: true,
                kezqsList: [],
                type:0// 0 驳回 1同意
            };
        },
        filters: {},
        watch: {
            radio(value) {
                this.pageIndex = 1;
                this.searchForm ={ } ;
                if (value) {
                    this.dataList = [];
                    this.getDataList();
                    console.log(this.searchForm)

                }
            }
        },
        created() {
            this.getDataList();
            this.getKhzq();//考核周期
        },
        computed: {
            ...mapGetters(["permissions"])
        },
        methods: {
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            } ,
            //点查看 查询详情
            dataView(row) {
                dataDetail(row.id).then(r => {
                    this.detailVisible = true;
                    this.$nextTick(() => {
                       // r.data = row ;
                        this.$refs.detailNode.init(r.data.data);
                    });
                });
            },

            // 勾选数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
                let agreeOrRefuse = val.every(it => { //every数组中检测到有一个元素不满足，则整个表达式返回 false
                    return it.state == 3;
                });
                let isConfirm = val.every(it => {
                    return it.state == 6;
                });
                if (val.length == 0) {
                    this.isAgreeOrRefuse = true;
                    this.canConfirm = true;
                } else {
                    if (agreeOrRefuse) {
                        this.isAgreeOrRefuse = false;
                    } else {
                        this.isAgreeOrRefuse = true;
                    }
                    if (isConfirm) {
                        this.canConfirm = false;
                    } else {
                        this.canConfirm = true;
                    }
                }
            },
            // 确定 同意
            confirmAgree(row) {
                const h = this.$createElement;
                this.$msgbox({
                    title: '提示',
                    message: h('p', { style:" font-size:16px" }, [
                        h('span', null, '对此单进行确认'),
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {

                            console.log("row.id") ;
                            console.log(row.id) ;
                            khdxConfirm(row.id).then(r => {

                                if (r.data.code == 0) {
                                    this.$message.success("操作成功");
                                    this.getDataList();
                                } else {
                                    this.$message.error(r.data.msg);
                                }

                            });
                            done();
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                });

            },


          //刷新界面
            refreshDataList(){
                this. getDataList() ;
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let khtype = "";
                if(this.radio == 1){
                    khtype = 'ry';
                }
                if(this.radio == 2){
                    khtype = 'jg';
                }
                eventSummaryList(
                    Object.assign(
                        {
                            current: this.pageIndex,
                            size: this.pageSize,
                            // sjbt:this.searchForm.sjbt,
                            // sjdesc:this.searchForm.sjdesc,
                            khzq:this.searchForm.khzq,
                            realname:this.searchForm.realname,
                            deptName:this.searchForm.deptName,
                            khtype:khtype,
                        }
                    ),
                    0
                )
                    .then(response => {
                        this.$nextTick(()=>{
                            this.$refs.dataList.doLayout() ;
                        })
                        this.dataList = response.data.data.records;
                        this.totalPage = response.data.data.total;
                        this.dataListLoading = false;
                    })
                    .catch(() => {
                        this.dataListLoading = false;
                    });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            //table表索引
            indexMethod(index) {
                return (this.pageIndex-1)*this.pageSize+index+1;
            },

            closeDetailDialog() {
                this.detailVisible = false;
            },

            closeAppealDialog() {
                this.appealVisible = false;
            },
            showUser(taskId) {
                this.taskId = taskId;
                this.usercommentTask = true;
                this.$nextTick(() => {
                    this.$refs.userTask.init("", "zxshr", JSON.stringify([]), "htcj");
                });
            }
            ,
            //获取考核周期列表
            getKhzq(){
                getKhzqSelect().then(r => {
                    r.data.data.forEach((ele) => {
                        let item = {
                            name:ele.period,
                            value:ele.id
                        }
                        this.kezqsList.push(item);

                    });
                });

            },
            searchByZq(){
                this.getDataList() ;
            },
            //打印
            print() {
                var data = this.multipleSelection;
                if (data.length == 0) {
                    this.$message.closeAll();
                    this.$message.warning("请选择一个工作！");
                    return;
                }
                var filename = "事件考核数据"+ ".xlsx";
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                exportExcel({
                    ids: ids
                }).then((response) => {
                    this.$message.closeAll();
                    this.$message.success("导出成功!");
                    let url = window.URL.createObjectURL(new Blob([response.data]));
                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", filename);
                    document.body.appendChild(link);
                    link.click();
                });
            },

        }
    };
</script>

<style lang="scss" scoped>
</style>
